<template>
    <div class="a">
        岗位名称<input type="text" placeholder="请输入岗位名称" v-model="formData.postName">
        岗位编码<input type="text" placeholder="请输入岗位编码" v-model="formData.postCode">
        状态<el-select placeholder="请选择" style="width: 200px; height: 30px; margin-left: 5px; margin-bottom: 5px;" v-model="formData.status">
            <el-option label="正常" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
        </el-select>
        <el-button type="primary" @click="loadData">搜索</el-button>
        <el-button @click="reset" plain>重置</el-button>
        <div class="b">
            <!-- 新增，删除，修改按钮 -->
            <el-button type="primary" plain @click="toInsert">新增</el-button>
            <el-button type="success" plain >修改</el-button>
            <el-button type="danger" plain>删除</el-button>
        </div>
    </div>

    <!-- 表格 -->
    <div class="c">
        <el-table :data="page.records" style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column v-for="col in columns" :prop="col.id" :key="col.id" :label="col.label" :width="col.width">
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary"  @click="toUpdate(scope.row)" size="small" :row="scope.row">编辑</el-button>
                    <el-button type="danger"  @click="toDelete(scope.row.postId)" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页 -->
    <div class="d">
        <el-pagination @current-change="loadData" v-model:currentPage="page.current" :page-sizes="[2, 4, 6, 8, 10]"
            :page-size="page.size" :total="page.total" background>
        </el-pagination>
    </div>
    <el-dialog :destory-on-close="true" :title="title" v-model="isVisble" width="600px" :key="Math.random()">
        <router-view @ref-table="refTable" :data="data"></router-view>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import request from '@/api/request'
import router from '@/router'
import { ElMessage } from 'element-plus'

let title = ref("")

let isVisble = ref(false)


let formData = ref({})

let data = ref({});

let page = ref({
    records: []
})
let columns = [
    { id: 'postId', label: '岗位编号' },
    { id: 'postName', label: '岗位名称' },
    { id: 'postCode', label: '岗位编码' },
    { id: 'postSort', label: '岗位排序' },
    { id: 'status', label: '状态' },
    { id: 'createTime', label: '创建时间' }

]
let loadData = () => {
    request({
        url: "/system/permission/post",
        method: "get",
        params: {
            current: page.value.current,
            size: page.size,
            ...formData.value
        }
    }).then(res => {
        page.value = res.data;
        console.log(page.value)
    })
}
loadData()

// 重置
let reset = () => {
    formData.value = {}
    loadData()
}
let toDelete = (id) => {
    request({
        url: "/system/permission/post/" + id,
        method: "delete"
    }).then(res => {
        ElMessage.success("删除成功")
        loadData()
    })
}
let toInsert = () => {
    title.value = "添加岗位"
    isVisble.value = true
    router.push('/system/permission/post/insert')
}
let toUpdate = (row) => {
    data.value = row
    console.log(row)
    title.value = "修改岗位"
    isVisble.value = true
    router.push('/system/permission/post/update')
}
let refTable = () => {
    isVisble.value = false;
    loadData();
}

</script>

<style scoped>
.top-breadcrumb {
    padding: 10px 20px;
    margin: auto 0;
    size: 20px;
    height: 40px;
    /* 下边框线 */
    border-bottom: 1px solid #ddd;
}

.top-breadcrumb-right {
    float: right;
}

input {
    width: 200px;
    margin: 0 10px;
    height: 30px;
    border: 1px solid #ccc;
}

.a {
    margin-left: 20px;
    margin-top: 10px;
    font-size: 14px;
    /* 加粗 */
    /* font-weight: bold; */
}

.a input {
    width: 200px;
    height: 30px;
    border: 1px solid #ccc;
    margin: 0 10px;

}

.a button {
    margin-left: 20px;
}

.b {
   
    margin-top: 20px;
}

.c {
    margin-left: 20px;
    margin-top: 20px;
}

.d {
    /* 放到表格右下角 */
    position: absolute;
    right: 0;
    margin-top: 20px;
}

/* 鼠标悬浮到表格改变背景色 */
table tr:hover {
    background-color: #ccc;
}

/* 分页样式 */
.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>
